<template>
  <div class="loading-state" :class="stateClass">
    <!-- 加载中状态 -->
    <div v-if="state === 'loading'" class="loading-content">
      <u-loading-icon 
        :size="size" 
        :color="color"
        :mode="loadingMode"
      ></u-loading-icon>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>
    
    <!-- 空状态 -->
    <div v-else-if="state === 'empty'" class="empty-content">
      <u-icon 
        :name="emptyIcon" 
        :size="size" 
        :color="emptyColor"
      ></u-icon>
      <p v-if="text" class="empty-text">{{ text }}</p>
      <u-button 
        v-if="showRetry" 
        type="primary" 
        size="small"
        @click="$emit('retry')"
      >
        重試
      </u-button>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="state === 'error'" class="error-content">
      <u-icon 
        :name="errorIcon" 
        :size="size" 
        :color="errorColor"
      ></u-icon>
      <p v-if="text" class="error-text">{{ text }}</p>
      <u-button 
        v-if="showRetry" 
        type="primary" 
        size="small"
        @click="$emit('retry')"
      >
        重試
      </u-button>
    </div>
    
    <!-- 自定义内容 -->
    <div v-else-if="state === 'custom'" class="custom-content">
      <slot name="custom"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Props {
  state: 'loading' | 'empty' | 'error' | 'custom'
  text?: string
  size?: number
  color?: string
  loadingMode?: 'spinner' | 'semicircle' | 'triple'
  emptyIcon?: string
  emptyColor?: string
  errorIcon?: string
  errorColor?: string
  showRetry?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  text: '',
  size: 48,
  color: '#007AFF',
  loadingMode: 'spinner',
  emptyIcon: 'inbox',
  emptyColor: '#999999',
  errorIcon: 'error-circle',
  errorColor: '#FF3B30',
  showRetry: false
})

// 計算屬性
const stateClass = computed(() => ({
  [`state-${props.state}`]: true,
  'has-text': !!props.text
}))

// 事件
defineEmits<{
  retry: []
}>()
</script>

<style scoped lang="scss">
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200rpx;
  padding: 40rpx;
  
  &.has-text {
    flex-direction: column;
  }
  
  // 加載中狀態
  &.state-loading {
    .loading-content {
      text-align: center;
      
      .loading-text {
        margin-top: 24rpx;
        font-size: 28rpx;
        color: var(--text-secondary);
      }
    }
  }
  
  // 空狀態
  &.state-empty {
    .empty-content {
      text-align: center;
      
      .empty-text {
        margin: 24rpx 0 32rpx;
        font-size: 28rpx;
        color: var(--text-tertiary);
      }
    }
  }
  
  // 錯誤狀態
  &.state-error {
    .error-content {
      text-align: center;
      
      .error-text {
        margin: 24rpx 0 32rpx;
        font-size: 28rpx;
        color: var(--text-secondary);
      }
    }
  }
  
  // 自定義狀態
  &.state-custom {
    .custom-content {
      width: 100%;
    }
  }
}
</style>
